<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用自定义事件的表单输入组件</title>
  <style type="text/css">
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
<div id="app" v-cloak>
  <currency-input 
    label="Price" 
    v-model="price"
  ></currency-input>
  <currency-input 
    label="Shipping" 
    v-model="shipping"
  ></currency-input>
  <currency-input 
    label="Handling" 
    v-model="handling"
  ></currency-input>
  <currency-input 
    label="Discount" 
    v-model="discount"
  ></currency-input>
  <p>Total: ${{ total }}</p>
</div>
<script src="../js/libs/vue.js"></script>
<script src="https://cdn.rawgit.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e/raw/98739fb8ac6779cb2da11aaa9ab6032e52f3be00/currency-validator.js"></script>
<script>
  Vue.component('currency-input', {
    template: '\
      <div>\
        <label v-if="label">{{ label }}</label>\
        $\
        <input\
          ref="input"\
          v-bind:value="value"\
          v-on:input="updateValue($event.target.value)"\
          v-on:focus="selectAll"\
          v-on:blur="formatValue"\
          >\
      </div>\
    ',
    props: {
      value: {
        type: Number,
        default: 0
      },
      label: {
        type: String,
        default: ''
      }
    },
    mounted: function () {
      this.formatValue()
    },
    methods: {
      updateValue: function (value) {
        var result = currencyValidator.parse(value, this.value)
        if (result.warning) {
          this.$refs.input.value = result.value
        }
        this.$emit('input', result.value)
      },
      formatValue: function () {
        this.$refs.input.value = currencyValidator.format(this.value)
      },
      selectAll: function (event) {
        setTimeout(function () {
          event.target.select()
        }, 0)
      }
    }
  })
  new Vue({
    el: '#app',
    data: {
      price: 0,
      shipping: 0,
      handling: 0,
      discount: 0
    },
    computed: {
      total: function () {
        return ((this.price * 100 + this.shipping * 100 + this.handling * 100 - this.discount * 100) / 100).toFixed(2)
      }
    }
  })
</script>
</body>
</html>